<template>
  <div id="itemMain" ref="itemRef"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { getYSYXYJByPFMarket, getJYHJcHGLByMarket } from "../../apis/home";
import { ref } from "vue";
const option = ref();
const myChart = ref();
const timeOut = ref();
const getInit = async () => {
  let nameList = [];
  let dataList = [];
  let dataList1 = [];
  await getJYHJcHGLByMarket().then((res) => {
    res.data.forEach((item) => {
      nameList.push(item.name);
      dataList.push(item.jcsum);
      dataList1.push(item.bfb.split('%')[0]);
    });
  });
  myChart.value = echarts.init(document.getElementById("itemMain"), null, {
    devicePixelRatio: 2.5,
  });
  option.value = {
    title: {
      text: '',
      x: 'center',
      y: 0,
      textStyle: {
        color: '#B4B4B4',
        fontSize: 16,
        fontWeight: 'normal',
      },

    },
    // backgroundColor: '#0d235e',
    legend: {
      top: "2%",
      textStyle: {
        color: "#fff",
        fontSize:12
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255,255,255,0.1)',
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
          backgroundColor: '#7B7DDC'
        }
      }
    },
    grid: {
      bottom: "15%", //也可设置left和right设置距离来控制图表的大小
      right: '13%'
    },
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 一次性展示6个。
      },
    ],
    xAxis: {
      data: nameList,
      axisLabel: {
        interval: 0,
        rotate: 40,
        fontSize:11
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false,
      },
      nameTextStyle:{
        fontSize:12
      }
    },
    yAxis: [{
      name: "检测数量",
      nameTextStyle: {
        color: "#fff",
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: '#fff',
        }
      },

      axisLabel: {
        formatter: '{value} ',
      }
    },
    {
      name: "合格率",
      nameTextStyle: {
        color: "#fff",
      },
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: '#fff',
        }
      },
      axisLabel: {
        formatter: '{value} %',
      }
    }],

    series: [{
      name: '合格率',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#0164CB'
        },
      },
      data: dataList1
    },

    {
      name: '数量',
      type: 'bar',
      barWidth: 15,
      itemStyle: {
        normal: {
          barBorderRadius: 10,
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#19E488' },
              { offset: 1, color: '#0A4176' }
            ]
          )
        }
      },
      data: dataList
    }
    ]
  };
  myChart.value.setOption(option.value);
  timeOut.value = setInterval(() => {
    if (option.value.dataZoom[0].endValue == dataList.length) {
      option.value.dataZoom[0].endValue = 5;
      option.value.dataZoom[0].startValue = 0;
    } else {
      option.value.dataZoom[0].endValue = option.value.dataZoom[0].endValue + 1;
      option.value.dataZoom[0].startValue =
        option.value.dataZoom[0].startValue + 1;
    }
    myChart.value.setOption(option.value);
  }, 2000);
  window.addEventListener("resize", () => {
    myChart.value.resize();
  });
};

getInit();
</script>

<style scoped lang="scss">
#itemMain {
  width: 100%;
  height: 100%;
}
</style>
